<template>
	<view @click="isxue = false">
		<view class="header">
			<image src="@/static/zuo.png" mode="" style="width: 45upx;height: 45upx;" @click="back"></image>
			<text style="font-size: 36upx;color: #333;padding-right: 350upx;">个人信息</text>
			<text style="font-size: 36upx;color: #333;padding-right: 50upx;" @click="queding">确定</text>
		</view>
		<view class="list" style="margin-top: 100upx;">
			<view class="items title">
				<view style="color: #333333;font-size: 30upx;">头像</view>
				<avatar selWidth="240px" selHeight="400upx" @upload="myUpload" :avatarSrc="url"
					avatarStyle="width: 120upx; height: 120upx;margin-left:125px;border-radius:30upx;">
				</avatar>
			</view>
		</view>
		<view class="list">
			<view class="items" style="display: flex;justify-content: flex-start;" @click="tomingzi">
				<view class="list-z">
					<view class="" style="display: flex;justify-content: flex-start;justify-content: flex-start;align-items: flex-start;">
						<text style="font-size: 26upx;color:#666666;">姓名</text>
						<text style="color: red;">*</text>
					</view>
					<view style="display: flex;justify-content: center;align-items: center;">
						<view style="color: #333333;font-size: 30upx;">
							<input type="text" v-model="user_name" placeholder="请输入姓名" style="font-size: 30upx;"
								disabled="true" />
						</view>
						<image src="../../../static/tuo.png" mode=""
							style="width: 28upx;height: 28upx;padding-right: 0upx;"></image>
					</view>
				</view>


			</view>
		</view>
		<view class="list">
			<text style="color: #999;font-size: 26upx;">性别</text>
			<picker @change="bindPickerChanged" :range="arrays">
				<view>
					<label class="pr38">{{arrays[indexd]}}</label>
					<image src="../../../static/tuo.png" mode=""
						style="width: 30upx;height: 30upx;padding-right: 0upx;"></image>
				</view>
			</picker>
		</view>
		<view class="list">
			<text style="color: #999;font-size: 26upx;">出生年月</text>
			<view style="color: #333333;font-size: 30upx;" @click="showPop">
				<input type="text" placeholder="请选择出生年月" style="font-size: 30upx;" disabled="true" v-model="shijian" />
				<image src="../../../static/tuo.png" mode="" style="width: 30upx;height: 30upx;padding-right: 0upx;">
				</image>
			</view>
			<min-picker :endTime="endTime" :startTime="startTime" @cancel="cancel" @sure="sure" :show="show"
				heightRpx="500">
			</min-picker>
		</view>
		<view class="list">
			<!-- <text style="color: #999;font-size: 26upx;">参加工作时间</text>
			<gpp-date-picker @onCancel="onCanceld" @onConfirm="onConfirmd" :startDate="startDated" :endDate="endDated"
				:defaultValue="pickerDated">
				<view>
					{{pickerDated}}
					<image src="../../../static/tuo.png" mode=""
						style="width: 30upx;height: 30upx;padding-right: 0upx;"></image>
				</view>
			</gpp-date-picker> -->
			<text style="color: #999;font-size: 26upx;">参加工作时间</text>
			<view style="color: #333333;font-size: 30upx;" @click="showPopd">
				<input type="text" placeholder="请选择参加工作时间" style="font-size: 30upx;" disabled="true"
					v-model="workshijian" />
				<image src="../../../static/tuo.png" mode="" style="width: 30upx;height: 30upx;padding-right: 0upx;">
				</image>
			</view>
			<min-picker :endTime="endTimed" :startTime="startTimed" @cancel="canceld" @sure="sured" :show="showd"
				heightRpx="500">
			</min-picker>
		</view>
		<view class="list">
			<!-- @click="getnav('/pagesB/personalSon/ModifynickName')" -->
			<view class="items" style="flex-direction: column;align-items: flex-start;">
				<view class="" style="display: flex;justify-content: flex-start;">
					<text style="font-size: 24upx;color: #999;">手机号</text>
					<text style="color: red;">*</text>
				</view>
				<view style="width:80%;color: #333333;font-size: 30upx;">
					<input type="text" v-model="userinfos.resume_phone" maxlength="11" placeholder="请输入你的手机号"/>
				</view>
			</view>
		</view>
		<view class="list" @click="tocity">
			<text style="color: #999;font-size: 26upx;">毕业学校</text>
			<view>
				<input type="text" placeholder="填写毕业院校" @input="soso" v-model="school_name" style="font-size: 26upx;" disabled="true">
				<image src="../../../static/tuo.png" mode="" style="width: 30upx;height: 30upx;padding-right: 0upx;">
				</image>
			</view>
		</view>
		<view class="list">
			<text style="color: #999;font-size: 26upx;">所学专业</text>
			<view>
				<input type="text" placeholder="填写所学专业" v-model="school_professional" style="font-size: 27upx;">
			</view>
		</view>
		<view class="list">
			<text style="color: #999;font-size: 26upx;">最高学历</text>
			<picker @change="bindPickerChange" :range="array">
				<view>
					<label class="pr38">{{array[indexw]}}</label>
					<image src="../../../static/tuo.png" mode=""
						style="width: 30upx;height: 30upx;padding-right: 0upx;"></image>
				</view>
			</picker>
		</view>
		<scroll-view scroll-y="true" class="xuexiao" v-if="isxue">
			<view v-for="(item, index) in leftList">
				<view class="" @click="nato(item.school_name,index)">
					<u-parse :html="school_name,item.school_name | toRed"
						style="width: 100%;height: 100upx;padding: 30upx;border-bottom: 2upx solid #EEEEEE;"></u-parse>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	import {
		pathToBase64,
		base64ToPath
	} from '@/components/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				url: "../../../static/tianjia.png",
				user_name: '',
				arrays: ['选择性别', '男', '女'],
				array: ['选择学历'],
				indexd: 0,
				sex: '',
				startDate: "1980-01-01",
				endDate: "2023-01-01",
				pickerDate: '1988-01-01',
				startDated: "1960-01-01",
				endDated: "2023-01-01",
				pickerDated: '2000-01-01',
				startTime: [1960, 1, 20],
				startTimed: [1960, 1, 20],
				endTime: 2022,
				endTimed: 2022,
				show: false,
				showd: false,
				userinfo: {},
				userinfos: {},
				school_name: '',
				isxue: false,
				leftList: [],
				school_professional: '',
				xuelist: [],
				indexw: 0,
				zhenImg: '',
				edu_id: '',
				useid: '',
				shijian: "",
				workshijian: '',
			}
		},
		onShow() {
			// uni.request({
			// 	url: 'https://dsx.cdzer.com/api/MemberInfo/getuserinfo', //仅为示例，并非真实接口地址。
			// 	method: 'POST',
			// 	data: {
			// 		uid: this.useid 
			// 	},
			// 	header: {
			// 		'content-type': 'application/x-www-form-urlencoded',
			// 	},
			// 	success: (res) => {
			// 		console.log(res, "sdadasdasdas")
			// 		this.userinfos = res.data.data
			// 		this.url = res.data.data.headimgurl
			// 		this.user_name = res.data.data.user_name
			// 		if (res.data.data.edu_name) {
			// 			this.indexd = res.data.data.sex
			// 			this.shijian = res.data.data.birth
			// 			this.workshijian = res.data.data.job_year
			// 			this.school_name = res.data.data.school_name
			// 			this.school_professional = res.data.data.school_professional
			// 			this.array[this.indexw] = res.data.data.edu_name
			// 		}
			// 	}
			// });
		},
		onLoad(option) {
			console.log(option.headerUrl,"传值头像")
			this.userinfo = JSON.parse(uni.getStorageSync("userInfo"));
			this.useid = option.useid
			
			uni.request({
				url: 'https://dsx.cdzer.com/api/Job/geteducation', //仅为示例，并非真实接口地址。
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				success: (res) => {
					console.log(res, "学历列表")
					this.xuelist = res.data.data
					res.data.data.forEach(item => {
						this.array.push(item.cate_name)
					})
				}
			});
			let aData = new Date();
			let dateValue = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
			console.log(dateValue, "哈哈哈哈哈哈")
			// this.endTimed = dateValue
			uni.request({
				url: 'https://dsx.cdzer.com/api/MemberInfo/getuserinfo', //仅为示例，并非真实接口地址。
				method: 'POST',
				data: {
					uid: option.useid
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				success: (res) => {
					console.log(res, "sdadasdasdas")
					this.userinfos = res.data.data
					if(option.headerUrl){
						this.url = option.headerUrl
						this.zhenImg = option.headerUrl
					}else{
						this.url = res.data.data.headimgurl
					}
					if(option.phone){
						this.userinfos.resume_phone = option.phone
					}
					if(option.sex){
						this.indexd = option.sex
						this.sex = option.sex
					}
					if(option.birth){
						this.shijian = option.birth
					}
					if(option.worktime){
						this.workshijian = option.worktime
					}
					this.user_name = res.data.data.user_name
					if(option.school_name){
						this.school_name = option.school_name
					}else{
						this.school_name = res.data.data.school_name
					}
					if (res.data.data.edu_name) {
						this.indexd = res.data.data.sex
						this.shijian = res.data.data.birth
						this.workshijian = res.data.data.job_year
						
						
						this.school_professional = res.data.data.school_professional
						this.array[this.indexw] = res.data.data.edu_name
					}
				}
			});
		},
		components: {
			avatar,
			gppDatePicker,
		},
		filters: {
			toRed: function(content, keyword) {
				var reslut = keyword.replace('' + content + '', "<text style='color:red;'>" + content + "</text>");
				return reslut;
			},
		},
		methods: {
			tocity(){
				uni.navigateTo({
					url:`./xuexiao?useid=${this.useid}&typename=${'个人信息'}&headerUrl=${this.zhenImg}&sex=${this.sex}&birth=${this.shijian}&worktime=${this.workshijian}&phone=${this.userinfos.resume_phone}`
				})
			},
			tomingzi() {
				uni.navigateTo({
					url:`./mingzi2?name=${this.user_name}`
				})
			},
			back() {
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				var that = this
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '提示',
						content: '您还未保存填写的信息，是否保存？',
						success: function(res) {
							if (res.confirm) {
								that.queding()
							} else if (res.cancel) {
								console.log('用户点击取消');
								// uni.navigateBack({
								// 	delta: 1
								// })
								uni.redirectTo({
									url:`/pages/tabBar/bianji/index?useid=${that.useid}`
								})
							}

						}
					});
				}.bind(this), 100);

			},
			// 弹出日期选择器
			showPop() {
				this.show = true
			},
			showPopd() {
				this.showd = true
			},
			// 关闭
			cancel() {
				this.show = false
			},
			canceld() {
				this.showd = false
			},
			sure(e) {
				console.log(e) // 返回的结果
				this.shijian = e.a + '-' + e.b + '-' + e.c
				this.show = false
			},
			sured(e) {
				console.log(e) // 返回的结果
				this.workshijian = e.a + '-' + e.b + '-' + e.c
				this.showd = false
			},

			queding() {
				console.log(this.shijian, this.workshijian, this.workshijian - this.shijian, "aaaaaaaaaa")
				var chu = this.shijian.substring(0, 4)
				var work = this.workshijian.substring(0, 4)
				let aData = new Date();
				let dateValue = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();

				var now = dateValue.substring(0, 4)
				console.log(now, "666", )
				if ((work - chu) > 18) {
					//注意：startTime --- endTime 可以得到当前的时间到一天前时间的范围
					if (now > work) {
						const data = {
							headimgurl: this.zhenImg,
							user_name: this.user_name,
							sex: this.sex,
							birth: this.shijian,
							school_id: this.school_id,
							school_name: this.school_name,
							school_professional: this.school_professional,
							job_year: this.workshijian,
							edu_id: this.edu_id,
							resume_phone:this.userinfos.resume_phone
						};
						this.$http.jiben(data).then(res => {

							if (res.status == 200) {
								console.log(res, "保存资料")
								this.$hideLoading()
								uni.showToast({
									title: res.mess
								})
								setTimeout(() => {
									uni.redirectTo({
										url: `./index?useid=${this.useid}`
									})
								}, 1200)
							} else {
								uni.showToast({
									title: res.mess,
									icon: 'none'
								})
							}
						})
					} else {
						uni.showToast({
							title: '参加工作的时间不能大于当前年份',
						 icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '工作时间必须是出生年月之后18年',
						icon: 'none'
					})
				}

			},
			bindPickerChange: function(e) { //改变的事件名
				this.indexw = e.target.value //将数组改变索引赋给定义的index变量
				this.edu_id = this.xuelist[this.indexw - 1].id
				this.edu_name = this.xuelist[this.indexw - 1].cate_name
				console.log(this.edu_id, "选择学历")
			},
			nato(name, index) {
				this.school_name = name
				this.school_id = this.leftList[index].id
				this.isxue = false
			},
			soso() {
				if (this.school_name !== '') {

					uni.request({
						url: 'https://dsx.cdzer.com/api/MemberInfo/search_school', //仅为示例，并非真实接口地址。
						method: 'POST',
						data: {
							school_name: this.school_name
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {
							console.log(res, "毕业学校")
							this.leftList = res.data.data
							if (this.leftList.length > 0) {
								this.isxue = true
							}

						}
					});
				} else {
					this.isxue = false
				}

			},
			bangshou() {
				uni.navigateTo({
					url: './bangphone'
				})
			},
			onCancel(e) {
				console.log(e);
			},
			onConfirm(e) {
				this.pickerDate = e.dateValue;
				console.log(this.pickerDate, "出生年月")
			},
			onCanceld(e) {
				console.log(e);
			},
			onConfirmd(e) {
				this.pickerDated = e.dateValue;
				console.log(this.pickerDate, "出生年月")
			},
			bindPickerChanged: function(e) { //改变的事件名
				this.indexd = e.target.value //将数组改变索引赋给定义的index变量
				this.sex = e.target.value
				console.log(e, "选择学历")
			},
			myUpload(rsp) {
				console.log(rsp, "图片选择呀")
				this.url = rsp.path; //更新头像方式一
				pathToBase64(rsp.path).then(base64 => {
					this.turl = base64
					console.log(this.turl, "this.turlthis.turl")
					uni.request({
						url: 'https://dsx.cdzer.com/merchants/Video/uploadImage', //仅为示例，并非真实接口地址。
						data: {
							cover_image: base64
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						method: 'POST',
						success: (res) => {
							console.log(res, "上传视频封面")
							this.zhenImg = res.data.data.image_url

						}
					});
				}).catch(error => {
					console.log(error)
				})
				//rsp.avatar.imgSrc = rsp.path; //更新头像方式二
			},
		}
	}
</script>

<style scoped lang="scss">
	uni-input {
		// width: 680upx;
	}

	.xuexiao {
		width: 100%;
		height: 755upx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 6666;
	}

	.header {
		position: fixed;
		justify-content: space-between;
		background-color: #fff;
		height: 110upx;
		width: 100%;
		top: 0;
		left: 0;
		display: flex;
		z-index: 100;
		align-items: center;
		padding-left: 30upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding: 30upx;
		justify-content: center;
		border-bottom: 2upx solid #EEEEEE;

		.list-z {
			display: flex;
			flex-direction: column;

			.tou {
				font-size: 36upx;
				color: 333333;
				font-weight: 550;
			}
		}

		view {
			padding-top: 5upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			color: #000;
		}
	}
</style>
